import React from "react";
import { Modal, Form, Input, Select, Button, Space } from "antd";
import { SendOutlined } from "@ant-design/icons";

const { TextArea } = Input;
const { Option } = Select;

interface NewDiscussionProps {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: {
    title: string;
    content: string;
    tags: string[];
  }) => void;
}

const NewDiscussion: React.FC<NewDiscussionProps> = ({
  visible,
  onCancel,
  onSubmit,
}) => {
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      onSubmit(values);
      form.resetFields();
    } catch (error) {
      console.error("表单验证失败:", error);
    }
  };

  return (
    <Modal
      title="发起讨论"
      open={visible}
      onCancel={onCancel}
      footer={null}
      width={800}
    >
      <Form form={form} layout="vertical" onFinish={handleSubmit}>
        <Form.Item
          name="title"
          label="标题"
          rules={[
            { required: true, message: "请输入讨论标题" },
            { max: 100, message: "标题最多100个字符" },
          ]}
        >
          <Input placeholder="请输入讨论标题" />
        </Form.Item>

        <Form.Item
          name="content"
          label="内容"
          rules={[
            { required: true, message: "请输入讨论内容" },
            { max: 2000, message: "内容最多2000个字符" },
          ]}
        >
          <TextArea
            placeholder="请详细描述你的问题或想法..."
            rows={6}
            showCount
            maxLength={2000}
          />
        </Form.Item>

        <Form.Item
          name="tags"
          label="标签"
          rules={[
            { required: true, message: "请至少选择一个标签" },
            { type: "array", max: 3, message: "最多选择3个标签" },
          ]}
        >
          <Select
            mode="multiple"
            placeholder="选择相关标签"
            style={{ width: "100%" }}
          >
            <Option value="进程管理">进程管理</Option>
            <Option value="内存管理">内存管理</Option>
            <Option value="文件系统">文件系统</Option>
            <Option value="设备管理">设备管理</Option>
            <Option value="系统调用">系统调用</Option>
            <Option value="并发同步">并发同步</Option>
            <Option value="死锁">死锁</Option>
            <Option value="调度算法">调度算法</Option>
          </Select>
        </Form.Item>

        <Form.Item style={{ marginBottom: 0, textAlign: "right" }}>
          <Space>
            <Button onClick={onCancel}>取消</Button>
            <Button type="primary" htmlType="submit" icon={<SendOutlined />}>
              发布讨论
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default NewDiscussion;
